<template>
  <view class="page">
    <wd-navbar
	    title=""
	    fixed
	    placeholder
	    left-arrow
	    safeAreaInsetTop
	    custom-class="nav"
	    :bordered="false"
	    @click-left="handleClickLeft"
	  ></wd-navbar>
    <image
      class="bg"
      src="https://yonganpicture.oss-cn-shenzhen.aliyuncs.com/13168717292/vipbg.png"
      style="width: 100vw; height: 100vh"
    ></image>
    <view class="content_box">
      <view class="d-flex-center">
        <wd-text color="#141414" size="16px" text="壁纸酷酷"></wd-text>
        <wd-img
          src="/static/assets/my/vlog.png"
          width="84rpx"
          height="76rpx"
        ></wd-img>
        <wd-text color="#141414" size="16px" text="VIP"></wd-text>
      </view>
      <view class="d-flex-center">
        <wd-text color="#717171" size="12px" text="您将获得以下特权"></wd-text>
      </view>
      <wd-gap height="20rpx"></wd-gap>
      <view class="tq_box">
        <view class="d-flex">
          <wd-img
            src="/static/assets/my/g.png"
            width="30rpx"
            height="23rpx"
          ></wd-img>
          <view class="txt_box">
            无限制<text style="color: #fe3d64">免费试用</text>全部壁纸和其他功能
          </view>
        </view>
        <wd-gap height="20rpx"></wd-gap>
        <view class="d-flex">
          <wd-img
            src="/static/assets/my/g.png"
            width="30rpx"
            height="23rpx"
          ></wd-img>
          <view class="txt_box">
            <text style="color: #fe3d64">100%</text>纯净无广告
          </view>
        </view>
        <wd-gap height="20rpx"></wd-gap>
        <view class="d-flex">
          <wd-img
            src="/static/assets/my/g.png"
            width="30rpx"
            height="23rpx"
          ></wd-img>
          <view class="txt_box">
            尊贵<text style="color: #fe3d64">VIP</text>标识
          </view>
        </view>
        <wd-gap height="20rpx"></wd-gap>
        <view class="d-flex">
          <wd-img
            src="/static/assets/my/g.png"
            width="30rpx"
            height="23rpx"
          ></wd-img>
          <view class="txt_box">
            精美<text style="color: #fe3d64">3D壁纸</text>随心使用
          </view>
        </view>
      </view>
      <view class="tc_wrap">
        <view
          :class="['tc_item', item.id === curr && 'active']"
          v-for="item in payList"
          :key="item.id"
          @click="(curr = item.id), (price = item.price)"
        >
          <view class="hot" v-if="item.id === 2">热门推荐</view>
          <view class="check_icon" v-if="item.id === curr"
            ><wd-icon name="check" size="12px"></wd-icon
          ></view>
          <wd-text :text="item.title" size="14px" color="#1A1A1A"></wd-text>
          <wd-gap height="10rpx"></wd-gap>
          <wd-text
            :text="`¥${item.price}`"
            size="16px"
            color="#1A1A1A"
          ></wd-text>
          <wd-gap height="10rpx"></wd-gap>
          <wd-text
            size="12px"
            :text="`¥${item.original_price}`"
            color="#656565"
            decoration="line-through"
          />
        </view>
      </view>
      <view class="d-flex-center">
        <wd-text text="支付方式" color="#A0A0A0"></wd-text>
      </view>
      <view class="payment_box">
        <!-- <view class="payment_item" @click="payment = 0">
					<view class="d-flex">
						<wd-img src="/static/assets/my/ali_pay.png" width="44rpx" height="43rpx"></wd-img>
						<view style="margin-left: 20rpx;font-size: 14px;">支付宝支付</view>
					</view>
					<wd-img v-if="payment === 0" custom-class="mask" src="/static/assets/my/select.png" width="22" height="22"></wd-img>
					<wd-icon v-else name="circle1" size="22px" color="#787878"></wd-icon>
				</view> -->
        <view class="payment_item" @click="payment = 1">
          <view class="d-flex">
            <wd-img
              src="/static/assets/my/wx_pay.png"
              width="44rpx"
              height="43rpx"
            ></wd-img>
            <view style="margin-left: 20rpx; font-size: 14px">微信支付</view>
          </view>
          <wd-img
            v-if="payment === 1"
            custom-class="mask"
            src="/static/assets/my/select.png"
            width="22"
            height="22"
          ></wd-img>
          <wd-icon v-else name="circle1" size="22px" color="#787878"></wd-icon>
        </view>
      </view>
      <wd-button
        :loading="loading"
        custom-class="wd_btn"
        @click="handleClick"
        block
        >立即开通</wd-button
      >
      <wd-gap safeAreaBottom></wd-gap>
    </view>
  </view>
</template>

<script setup>
import { toRouter } from "@/hooks/utils";
import { ref, onMounted } from "vue";
import { toSwich } from "../../hooks/utils";
import store from "../../store";
const handleClickLeft = function handleClickLeft() {
  uni.navigateBack();
};

const curr = ref(null),
  price = ref(0);
const payment = ref(1);
const payList = ref([]);
const loading = ref(false);
const initPayList = () => {
  uni
    .request({
      url: "/api/wallpaper/price/list",
    })
    .then((res) => {
      payList.value = res.data;
      curr.value = res.data[0]?.id;
      price.value = res.data[0]?.price;
    });
};
onMounted(() => {
  initPayList();
});
const handleClick = () => {
  if (!uni.getStorageSync("wpa_username")) {
    return uni.showToast({
      title: "请先登录",
      icon: "none",
      duration: 1500,
    });
  }
  // loading.value = true
  uni.showToast({
    title: "正在开通会员",
    icon: "loading",
    mask: true,
    duration: 15000,
  });
  let username = uni.getStorageSync("wpa_username");
  wx.login({
    success: function (loginRes) {
      if (loginRes.code) {
        console.log(loginRes.code);

        uni.request({
          url: "/api/wallpaper/price/openid",
          method: "POST",
          data: {
            code: loginRes.code,
          },
          success: (res) => {
            console.log(res.data);
            if (res.data.openid) {
              const openid = res.data.openid;
              uni.request({
                url: "/api/wallpaper/user/update",
                method: "POST",
                data: {
                  username: username,
                  openid: res.data.openid,
                },
                success: (res) => {
                  uni.request({
                    url: "/api/wallpaper/price/create",
                    method: "POST",
                    data: {
                      openid: openid,
                      amount: parseFloat(price.value),
                    },
                    success: (res) => {
                      console.log(res);

                      let pay_info = {};
                      if (res.data.parameter) {
                        pay_info = JSON.parse(res.data.parameter);
                        console.log(pay_info);

                        //@ts-ignore
                        uni.requestPayment({
                          provider: "wxpay",
                          timeStamp: pay_info.timeStamp,
                          nonceStr: pay_info.nonceStr,
                          package: pay_info.package,
                          signType: "MD5",
                          paySign: pay_info.paySign,
                          success: (res) => {
                            console.log("支付成功:", res);
                            uni.hideToast();
                            uni.showToast({
                              title: "支付成功",
                              icon: "success",
                              duration: 1500,
                            });
                            store.getUserInfo();
                            setTimeout(() => {
                              uni.showModal({
                                content: "开通成功",
                                showCancel: false,
                                confirmText: "确定",
                                success: (res) => {
                                  if (res.confirm) {
                                    toSwich("/pages/my/index");
                                  }
                                },
                              });
                            }, 1500);
                          },
                          fail: (err) => {
                            uni.hideToast();
                            uni.showToast({
                              title: "支付取消",
                              icon: "none",
                              duration: 1500,
                            });
                            console.error("支付失败:", err);
                          },
                        });
                      }

                      console.log(pay_info);
                    },
                    fail: (err) => {
                      console.error("开通失败:", err);
                      uni.hideToast();
                      uni.showToast({
                        title: "开通失败",
                        icon: "none",
                        duration: 1500,
                      });
                    },
                  });
                },
              });
            }
          },
        });
      }
    },
  });
};
</script>

<style lang="scss" scoped>
:deep() {
  .nav {
    background: transparent;
    .wd-icon-arrow-left {
      color: #fff;
    }
  }
  .cus_tabs {
    .wd-tabs__nav-item {
      flex: unset;
      padding: 0 20rpx;
    }
  }
  .wd_btn {
    background: #fe4484;
    --wot-color-theme: #fe4484;
    &.is-disabled {
      --wot-color-theme: #bfbfbf;
      --wot-button-disabled-opacity: 1;
    }
  }
}
.page {
  position: relative;
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
}
.content_box {
  padding: 142rpx 40rpx 0;
  min-height: 50vh;
  background: linear-gradient(
    transparent,
    rgba(255, 255, 255, 0.5) 8%,
    #fff 20%
  );
  .tq_box {
    padding: 30rpx 40rpx;
    .txt_box {
      margin-left: 20rpx;
    }
  }
  .tc_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    margin: 50rpx 0 20rpx;
    .tc_item {
      text-align: center;
      background: #f5f5f5;
      padding: 30rpx;
      border-radius: 30rpx;
      position: relative;
      border: 1px solid #f5f5f5;
      &.active {
        background: #ffedf1;
        border-color: #fe3d64;
      }
      .hot {
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        background: linear-gradient(to bottom, #ff6109, #ffb07a);
        padding: 6rpx 15rpx;
        transform: translate(0, -70%);
        border-radius: 30rpx 30rpx 30rpx 0;
        font-size: 14px;
      }
      .check_icon {
        padding: 4rpx 10rpx;
        position: absolute;
        right: -1rpx;
        bottom: -1rpx;
        background: #fe3d64;
        color: #fff;
        border-radius: 4rpx 0 30rpx 4rpx;
        font-size: 0;
      }
    }
  }
  .payment_box {
    display: flex;
    justify-content: space-between;
    margin: 25rpx 0 50rpx;
    .payment_item {
      width: 45%;
      background: #f5f5f5;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15rpx 20rpx;
      box-sizing: border-box;
    }
  }
}
</style>
